<script setup>
import {onMounted, ref} from "vue";
import {listChannel} from "../../../http/rabbitmq/channel.js";

let channelTableData = ref([])

function handleChannelList() {
  listChannel().then(response => {
    channelTableData.value = response.items
  })
}

onMounted(() => {
  handleChannelList()
})

</script>

<template>
  <div style="display: flex; flex-flow: column nowrap; width: 100%; height: 100%; overflow: hidden;">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px;">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="Name">
          <el-input clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleChannelList">Search</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
        highlight-current-row
        :data="channelTableData" border style="width: 100%;">
      <el-table-column label="Overview">
        <el-table-column prop="vhost" label="vhost" width="70"/>
        <el-table-column prop="name" label="name" min-width="330"/>
        <el-table-column prop="node" label="node" width="140"/>
        <el-table-column prop="user" label="user" width="80"/>
        <el-table-column prop="confirm" label="confirm" width="80"/>
        <el-table-column prop="state" label="state" width="90">
          <template #default="scope">
            <el-tag :type="scope.row.state === 'running' ? 'success' : 'danger'">{{ scope.row.state }}</el-tag>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="Details">
        <el-table-column prop="messages_unconfirmed" label="unconfirmed" width="110"/>
        <el-table-column prop="prefetch_count" label="prefetch" width="90"/>
        <el-table-column prop="messages_unacknowledged" label="unack" width="80"/>
      </el-table-column>
      <el-table-column label="Message rates">
        <el-table-column prop="message_stats.publish_details.rate" label="publish" width="80"/>
        <el-table-column prop="message_stats.confirm_details.rate" label="confirm" width="80"/>
        <el-table-column prop="message_stats.drop_unroutable_details.rate" label="unroutable (drop)" width="150"/>
        <el-table-column prop="message_stats.deliver_get_details.rate" label="deliver / get" width="120"/>
        <el-table-column prop="message_stats.ack_details.rate" label="ack" width="80"/>
      </el-table-column>
    </el-table>
  </div>

</template>

<style scoped>

</style>